<template>
  <div class="conserveTaskDetail" v-if="detailForm">
    <h4>任务详情</h4>
    <table border="1" rules="all" class="table">
      <tr>
        <td>设备名称</td>
        <td>{{detailForm.deviceName}}</td>
        <td>设备编号</td>
        <td>{{detailForm.deviceCoder}}</td>
      </tr>
      <tr>
        <td>任务单号</td>
        <td>{{detailForm.taskCoder}}</td>
        <td>养护类型</td>
        <td>{{detailForm.conserveTypeName}}</td>
      </tr>
      <tr>
        <td>养护周期</td>
        <td>{{detailForm.circleCycle}}
          <span v-show="detailForm.circleUnit==1">天</span>
          <span v-show="detailForm.circleUnit==2">周</span>
          <span v-show="detailForm.circleUnit==3">月</span>
        </td>
        <td>责任人</td>
        <td>{{detailForm.chargeUserName}}</td>
      </tr>
      <tr class="height">
        <td>养护说明</td>
        <td colspan="3">
          {{detailForm.conserveExplain}}
        </td>
      </tr>
    </table>
    <h4>养护记录</h4>
    <table border="1" rules="all" class="table table1">
      <tr>
        <td>养护时间</td>
        <td>{{detailForm.executeDate}}</td>
        <td>养护人</td>
        <td>{{detailForm.conserveName}}</td>
        <td>养护总费用</td>
        <td>{{taskTotal}}</td>
      </tr>
      <tr class="height">
        <td>养护描述</td>
        <td colspan="5">{{detailForm.conseDescribe}}</td>
      </tr>
    </table>
    <h4>图片</h4>
    <div class="unloadBox">
      <div class="img" v-for="item in detailForm.deviceTaskAnnexList">
        <el-image :src="baseUrl()+item.filePath" :preview-src-list="[baseUrl()+item.filePath]"></el-image>
        <!-- <i class="el-icon-close" @click="imgDel(index,item.filePath)"></i> -->
      </div>
    </div>
    <h4>保养费用<span @click="consumable">耗材对比</span></h4>
    <el-table v-loading="taskLoading" :data="detailForm.deviceMaintainrcostList" border>
      <el-table-column label="名称" prop="name"/>
      <el-table-column label="使用人">
        <template slot-scope="scope">
          {{userName}}
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="number"/>
      <el-table-column label="单价" prop="price"/>
      <el-table-column label="小计" prop="subtotal"/>
    </el-table>
    <div class="total">总计：{{taskTotal}}</div>
  </div>
</template>

<script>
  import {conservetaskInfo} from '@/api/curing/index'
  import Cookies from 'js-cookie'
  export default {
    name: "conserveTaskDetail.vue",
    data() {
      return {
        detailForm: null,
        taskStatus: false,
        taskLoading: false,
        taskList: [],
        taskTotal: 0,
        taskForm: {
          pageNum: 1,
          pageSize: 10,
        },
        userName:Cookies.get('username'),
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData(){
        conservetaskInfo(this.$route.query.id).then((res)=>{
          if(res.code==200){
            this.detailForm=res.data
            this.detailForm.deviceMaintainrcostList.forEach((i)=>{
              this.taskTotal+=i.subtotal
            })
          }
        })
      },
      getTaskList() {

      },
      consumable(){
        this.$router.push({path:'/conserve/consumable',query:{data:this.detailForm}});
      }
    }
  }
</script>

<style scoped lang="scss">
  .conserveTaskDetail {
    margin-left: 10px;
    width: 905px;
    .btn {
      text-align: center;
    }

    h4 {
      color: #05A380;

      .el-checkbox {
        padding-left: 10px;
        color: #05A380;
      }

      span {
        float: right;
        color: #2196F3;
        cursor:pointer;
      }
    }

    .img {
      border: 1px solid #cccccc;
      width: 900px;
      min-height: 50px;
    }

    .table {
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;

      .height {
        height: 120px;
      }

      tr {
        td:nth-child(2n-1) {
          width: 150px;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 300px;
          padding-left: 10px;
        }

        td {
          line-height: 35px;

          .red {
            color: red;
          }
        }

        .right {
          text-align: right !important;
          padding-right: 10px;
        }
      }
    }

    .table1 {
      tr {
        td:nth-child(2n-1) {
          width: 100px;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 200px;
          padding-left: 10px;
        }
      }
    }
    .total{
      text-align: right;
      margin-right:10px;
      margin-top:10px;
    }
    .unloadBox{
      border: 1px solid #cccccc;
      margin-top:20px;
      min-height: 50px;
      overflow: hidden;
      .file{
        width:100%;
        border-top:1px #cccccc dotted;
        line-height: 50px;
        .index{
          padding:0 10px;
          color:#666
        };
        i{
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .type{
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }



    }
  }

</style>
